<template>
  <div>
    <!-- 1. 卡片布局 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, i) in list" :key="item.id"
        ><div class="grid-content bg-purple">
          <i
            :style="{ color: color[i] }"
            class="iconfont "
            :class="item.icon"
          ></i>
          <div>
            <h4>{{ item.text }}</h4>
            <p>{{ item.num }}</p>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: Array,
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #333;
  background-color: #ffffff;
  text-align: center;
}
i {
  font-size: 38px;
}
h4 {
  color: #999999;
}
p {
  font-weight: 700;
  font-size: 18px;
}
</style>
